<head>
	<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://ckeditor.com 'unsafe-inline' 'unsafe-eval'">
</head>

<p>
	<button id="destroyEditor">Destroy editor</button>
	<button id="initEditor">Init editor</button>
</p>

<div style="margin-bottom: 10px;">
	<button type="button" id="clear-content">Clear editor</button>
	<button type="button" id="print-data-action">Open print preview</button>
	<button id="read-only">Turn on read-only mode</button>

	<iframe id="print-data-container" aria-hidden="true" tabindex="-1"></iframe>
</div>

<div id="editor">
	<h2>Lists in the table</h2>
	<figure class="table">
		<table style="width: 600px;border-bottom:2px dashed hsl(0, 0%, 60%);border-left:2px dashed hsl(0, 0%, 60%);border-right:2px dashed hsl(0, 0%, 60%);border-top:2px dashed hsl(0, 0%, 60%);">
			<tbody>
				<tr>
					<td style="text-align: center"><span class="text-big" style="font-weight: bold">Bulleted list</span></td>
					<td style="text-align: center"><span class="text-big" style="font-weight: bold">Numbered list</span></td>
					<td style="text-align: center"><span class="text-big" style="font-weight: bold">To do list</span></td>
				</tr>
				<tr>
					<td style="vertical-align:top; width: 33%">
						<ul>
							<li>UL List item 1</li>
							<li>UL List item 2</li>
						</ul>
					</td>
					<td style="vertical-align:top; width: 33%">
						<ol>
							<li>OL List item 1</li>
							<li>OL List item 2</li>
						</ol>
					</td>
					<td style="vertical-align:top; width: 33%">
						<ul class="todo-list">
							<li>
								<label class="todo-list__label">
									<input type="checkbox" />
									<span class="todo-list__label__description">Foo</span>
								</label>
							</li>
							<li>
								<label class="todo-list__label">
									<input type="checkbox" checked="checked" />
									<span class="todo-list__label__description">Foo</span>
								</label>
							</li>
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
	</figure>

	<h2>Basic features overview</h2>
	<p>Lorem <b>ipsum dolor sit </b>amet, consectetur <i>adipisicing elit</i>.<sub>1</sub></p>
	<h3>Basic styles</h3>
	<p>Ad alias, <s>architecto</s> culpa <b><i>cumque</i></b> dignissimos <code>dolor eos incidunt ipsa itaque</code> <u>laboriosam</u> magnam molestias nihil <i><u>numquam</u></i> odit quam, suscipit <i><s>veritatis</s></i> voluptate voluptatum.<sup>2</sup></p>
	<h3>Image</h3>
	<figure class="image">
		<img alt="bar" src="../sample.jpg">
		<figcaption>Caption</figcaption>
	</figure>
	<h3>Blockquote</h3>
	<blockquote>
		<p>Quote</p>
		<ul>
			<li><a href="#">Quoted</a> UL List item 1</li>
			<li>Quoted UL List item 2</li>
		</ul>
		<p>Quote</p>
	</blockquote>

	<div class="page-break" style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>

	<h2>Media with previews in the table</h2>
	<figure class="table">
		<table style="background-color:hsl(0,0%,90%);border-bottom:2px solid hsl(0, 0%, 0%);border-left:2px solid hsl(0, 0%, 0%);border-right:2px solid hsl(0, 0%, 0%);border-top:2px solid hsl(0, 0%, 0%);">
			<tbody>
				<tr>
					<td style="text-align: center"><span class="text-big" style="font-weight: bold">Service</span></td>
					<td style="text-align: center"><span class="text-big" style="font-weight: bold">Preview</span></td>
					<td style="text-align: center"><span class="text-big" style="font-weight: bold">URL</span></td>
				</tr>
				<tr>
					<td style="text-align: center"><u>YouTube</u></td>
					<td>
						<figure class="media">
							<oembed url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></oembed>
						</figure>
					</td>
					<td>
						<span class="text-small"><a href="https://www.youtube.com/watch?v=ZVv7UMQPEWk">https://www.youtube.com/watch?v=ZVv7UMQPEWk</a></span>
					</td>
				</tr>
				<tr>
					<td style="text-align: center"><u>Vimeo</u></td>
					<td>
						<figure class="media">
							<oembed url="https://vimeo.com/1084537"></oembed>
						</figure>
					</td>
					<td>
						<span class="text-small"><a href="https://vimeo.com/1084537">https://vimeo.com/1084537</a></span>
					</td>
				</tr>
			</tbody>
		</table>
	</figure>

	<h2>Code blocks in the table</h2>
	<figure class="table">
		<table style="border-bottom:2px dashed hsl(0, 0%, 60%);border-left:2px dashed hsl(0, 0%, 60%);border-right:2px dashed hsl(0, 0%, 60%);border-top:2px dashed hsl(0, 0%, 60%);">
			<tbody>
				<tr>
					<td style="text-align: center"><span class="text-big" style="font-weight: bold">Language</span></td>
					<td style="text-align: center"><span class="text-big" style="font-weight: bold">Code snippet</span></td>
					<td style="text-align: center"><span class="text-big" style="font-weight: bold">Language</span></td>
					<td style="text-align: center"><span class="text-big" style="font-weight: bold">Code snippet</span></td>
				</tr>
				<tr>
					<td style="text-align: center;vertical-align:top">CSS</td>
					<td style="vertical-align:top">
					<pre><code class="language-css">body {
	color: red;
}

p {
	font-size: 10px;
}</code></pre></td>
					<td style="text-align: center;vertical-align:top">PHP</td>
					<td style="vertical-align:top"><pre><code class="language-php">&lt;?php

function dump( array ...$args ) {
	foreach ( $args as $item ) {
		var_dump( $item );
	}

	die;
}</code></pre></td>
				</tr>
				<tr>
					<td style="text-align: center;vertical-align:top">JavaScript</td>
					<td style="vertical-align:top">
					<pre><code class="language-javascript">function foo() {
	console.log( 'indented using 1 tab' );
}

function bar() {
    console.log( 'indented using spaces' );
}</code></pre></td>
					<td style="text-align: center;vertical-align:top">Plaintext</td>
					<td style="vertical-align:top"><pre><code class="language-plaintext">Plain text</code></pre></td>
				</tr>
			</tbody>
		</table>
	</figure>
</div>

<style>
	#print-data-container {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		border: 0;
		padding: 0;
		white-space: nowrap;
		clip-path: inset(100%);
		clip: rect(0 0 0 0);
		overflow: hidden;
	}
	.custom-class {
		margin-top: 100px;
		margin-left: 100px;
		margin-bottom: 100px;
		width: 450px;
	}
</style>
